import React from 'react'
import { View, Text, StyleSheet } from 'react-native';
import { InputItem, Toast } from 'antd-mobile'
import { createForm } from 'rc-form'
import _ from 'lodash'
import CButton from '../../components/Button'
import { passwordReg, mobileReg, NavigationActions, emailReg, createAction } from '../../utils'
import { THEME_BACKGROUND, THEME_LABEL, THEME_TEXT } from '../../static/color';

const styles = StyleSheet.create({
  loginPage: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'flex-start',
    padding: 20,
    backgroundColor: THEME_BACKGROUND
  },
  loginSection: {
    flexDirection: 'column',
    justifyContent: 'center',
    padding: 20
  },
  loginTitle: {
    fontSize: 28,
    fontWeight: '500',
    color: 'white',
    textAlign: 'center',
    marginTop: 32,
    marginBottom: 32
  },
  subButton: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: 8
  },
  subButtonText: {
    color: 'white',
    fontSize: 14
  },
  loginInput: {
    marginBottom: 8
  }
});

const LoginPage = (props) => {
  const { form, signUp } = props
  const { getFieldProps, getFieldValue } = form
  const regUserName = signUp.username
  const regPassword = signUp.password

  doLogin = () => {
    const { dispatch, goLogin } = props
    const password = getFieldValue('password')
    const username = getFieldValue('username')
    if (_.isNil(password) || _.isNil(username)) {
      return Toast.info('请输入你的用户名和密码后再登录', 1)
    } else if (!passwordReg.test(password)) {
      return Toast.info('输入的邮箱或者密码格式不正确！', 1)
    } else if (_.isNil(regUserName) && _.isNil(regPassword)) {
      dispatch({ type: 'login/Login', payload: { username, password } })
    } else {
      dispatch({ type: 'login/Login', payload: { username: regUserName, password: regPassword } })
    }
    return null
  }

  doReg = () => {
    const { dispatch } = props
    dispatch(NavigationActions.navigate({ routeName: 'SignUp' }))
  }

  findAccount = () => {
    const { dispatch } = props
    dispatch(NavigationActions.navigate({ routeName: 'ForgetPassword' }))
  }

  return (
    <View style={styles.loginPage}>
      <View style={styles.loginSection}>
        <Text style={styles.loginTitle}>Sign In</Text>
        <InputItem
          {...getFieldProps('username')}
          type="text"
          value={_.isNil(regUserName) ? getFieldValue('username') : regUserName}
          placeholder="请输入你的用户名"
        />
        <InputItem
          style={{ marginBottom: 100 }}
          {...getFieldProps('password')}
          type="password"
          placeholder="请输入你的密码"
          value={_.isNil(regPassword) ? getFieldValue('password') : regPassword}
          error={_.isNil(getFieldValue('password')) ? false : (getFieldValue('password').length < 6 || getFieldValue('password').length > 20) || !passwordReg.test(getFieldValue('password'))}
          onErrorClick={() => {
            const password = getFieldValue('password')
            if (password.length < 6) {
              return Toast.info('密码安全系数过低！')
            } else if (password.length > 20) {
              return Toast.info('密码过去复杂！')
            }
            return Toast.info('密码格式不正确！')
          }}
        />
        <CButton style={styles.loginInput} title="登录" onPress={() => this.doLogin()} />
        <View style={styles.subButton}>
          <Text style={styles.subButtonText} onPress={() => this.doReg()}>免费注册</Text>
          <Text style={styles.subButtonText} onPress={() => this.findAccount()}>找回密码</Text>
        </View>
      </View>
    </View>
  )
}

export default createForm()(LoginPage)
